﻿import React, { Component } from 'react';
import PropTypes from 'prop-types';
import removeIcon from '../../imgs/remove.png';
import '../../common/common.css';
import Checkable from '../../common/Checkable';
import './Candidates.css';

class CandidateUI extends Component {
    static propTypes = {
        candidate: PropTypes.object.isRequired,
        depVisible: PropTypes.bool,
        onRemove: PropTypes.func.isRequired
    }
    render() {
        const can = this.props.candidate;
        return (
            <div className='hflex candidate'>
                <span className={`can-${can.type}`} >{can.title}</span>
                {this.props.depVisible === true &&
                    <span className='can-department'>{can.department}</span>
                }
                <img alt=''
                    className='remove-icon'
                    src={removeIcon}
                    onClick={this.props.onRemove}></img>
            </div>
        )
    }
}
export default class Candidates extends Component {
    static propTypes = {
        pickerVisible: PropTypes.bool,
        depVisible: PropTypes.bool,
        candidates: PropTypes.array.isRequired,
        removeCandidate: PropTypes.func.isRequired,
        clearCandidates: PropTypes.func.isRequired,
        togglePicker: PropTypes.func,
        toggleDepVisible: PropTypes.func
    }
    render() {
        return (
            <div className='block'>
                <div className='hflex rece-title-bar'>
                    <div className='block-title'>选择接收人：</div>
                    <div className='hflex'>
                        <Checkable
                            disabled={!this.props.toggleDepVisible}
                            text='显示部门/院系'
                            checked={this.props.depVisible}
                            onCheck={this.props.toggleDepVisible} />
                        <div className='ml-5'/>
                        <Checkable 
                            text='打开挑选工具'
                            disabled={!this.props.togglePicker}
                            checked={this.props.pickerVisible}
                            onCheck={this.props.togglePicker} />
                    </div>
                </div>
                <div className='block-content-box receiver-box'>
                    {
                        this.props.candidates && this.props.candidates.map(can =>
                            <CandidateUI
                                key={can.key}
                                candidate={can}
                                depVisible={this.props.depVisible}
                                onRemove={() => this.props.removeCandidate(can)}
                            />
                        )
                    }
                </div>
            </div>
        )
    }
}
